<template>
  <section class="mui-content pd">
    <mh-header headName="我保存的互动模板"> </mh-header>
    <div>
      <div class="on-act bg-w mh-pd">
        <h4 class="tit success">全部活动</h4>
        <swiper :options="swiperOption" ref="recentContact">
          <!-- slides -->
          <swiper-slide v-for="item in recentContacter" :key="item.id">
            <div class="flex">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.pic" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.name">用户名</p>
                <p class="con-rest"><span>安徽黄山旅游风景区</span>|<span>男{{item.boy}}</span>|<span>女{{item.girl}}</span></p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="on-act bg-w mh-pd">
        <h4 class="tit success">旅游</h4>
        <swiper :options="swiperOption" ref="recentContact">
          <!-- slides -->
          <swiper-slide v-for="item in recentContacter" :key="item.id">
            <div class="flex">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.pic" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.name">用户名</p>
                <p class="con-rest"><span>安徽黄山旅游风景区</span>|<span>男{{item.boy}}</span>|<span>女{{item.girl}}</span></p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>

      <div class="on-act bg-w mh-pd">
        <h4 class="tit success">聚餐</h4>
        <swiper :options="swiperOption" ref="recentContact">
          <!-- slides -->
          <swiper-slide v-for="item in recentContacter" :key="item.id">
            <div class="flex">
              <div class="con-l">
                <div class="pic-box">
                  <img :src="item.pic" alt="头像">
                </div>
              </div>
              <div class="con-r">
                <p class="con-name mui-ellipsis" v-text="item.name">用户名</p>
                <p class="con-rest"><span>安徽黄山旅游风景区</span>|<span>男{{item.boy}}</span>|<span>女{{item.girl}}</span></p>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </section>
</template>

<script>
  import MhHeader from '@/components/mh-header/mh-header'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: "mind-match",
    data () {
      return {
        swiperOption: {
          loop: false,
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 15,
          slidesPerColumnFill : 'row'
        },
        recentContacter: [
          // {
          //   id: '10001',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //   name: '黄山相亲游',
          //   boy: 32,
          //   girl: 32
          // },
          // {
          //   id: '10002',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //   name: '大鱼',
          //   boy: 32,
          //   girl: 32
          // },
          // {
          //   id: '10003',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //   name: '张三丰',
          //   boy: 32,
          //   girl: 32
          // },
          // {
          //   id: '10004',
          //   pic: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1713526531,3850193221&fm=26&gp=0.jpg',
          //   name: '胡寺',
          //   boy: 32,
          //   girl: 32
          // }
        ]
      }
    },
    computed: {
      swiper() {
        return this.$refs.recentContact.swiper
      }
    },
    components: {
      MhHeader,
      swiper,
      swiperSlide
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .pic-box {
    background-color: #eee;
    @include mh-avatar-box(3.2rem, 3.2rem)
  }
  .tit {
    margin: .8rem 0;
    font-size: 1.5rem;
    &.success {color: #34b87f;}
    &.warning {color: #ffa004;}
  }

</style>
